<template>
  <div class="sku-inventory">
    <div class="page-header">
      <h2>SKU库存管理</h2>
      <div class="header-actions">
        <el-button type="success" @click="showAddSkuDialog">
          <i class="el-icon-plus"></i> 添加SKU
        </el-button>
        <el-button type="primary" @click="importSkus">
          <i class="el-icon-upload2"></i> 批量导入
        </el-button>
        <el-button type="info" @click="exportSkus">
          <i class="el-icon-download"></i> 导出数据
        </el-button>
      </div>
    </div>
    
    <el-card shadow="hover" class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="SKU编码">
          <el-input v-model="filterForm.sku" placeholder="SKU编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="SKU名称">
          <el-input v-model="filterForm.name" placeholder="SKU名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="filterForm.category" placeholder="分类" clearable>
            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存状态">
          <el-select v-model="filterForm.stockStatus" placeholder="库存状态" clearable>
            <el-option label="充足" value="sufficient"></el-option>
            <el-option label="警告" value="warning"></el-option>
            <el-option label="紧急" value="critical"></el-option>
            <el-option label="缺货" value="outOfStock"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card shadow="hover" class="table-card">
      <div class="table-operations">
        <span class="total-count">共 {{ total }} 条记录</span>
        <el-select v-model="batchAction" placeholder="批量操作" size="small" style="width: 120px">
          <el-option label="批量入库" value="inbound"></el-option>
          <el-option label="批量出库" value="outbound"></el-option>
          <el-option label="批量导出" value="export"></el-option>
        </el-select>
        <el-button size="small" type="primary" :disabled="!selectedSkus.length" @click="handleBatchAction">
          执行
        </el-button>
      </div>
      
      <el-table
        :data="skus"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="image" label="图片" width="80">
          <template slot-scope="scope">
            <el-image 
              style="width: 50px; height: 50px" 
              :src="scope.row.image" 
              :preview-src-list="[scope.row.image]"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="SKU编码" width="150"></el-table-column>
        <el-table-column prop="name" label="SKU名称" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="category" label="分类" width="120"></el-table-column>
        <el-table-column prop="stock" label="当前库存" width="100"></el-table-column>
        <el-table-column prop="minStock" label="最低库存" width="100"></el-table-column>
        <el-table-column prop="stockStatus" label="库存状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStockStatusType(scope.row.stockStatus)">
              {{ getStockStatusText(scope.row.stockStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="linkedProducts" label="关联商品数" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="viewLinkedProducts(scope.row)">
              {{ scope.row.linkedProducts }} 个
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="lastUpdate" label="最后更新" width="170"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleInbound(scope.row)">入库</el-button>
            <el-button size="mini" type="warning" @click="handleOutbound(scope.row)">出库</el-button>
            <el-button size="mini" type="info" @click="viewDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    
    <!-- 添加SKU对话框 -->
    <el-dialog title="添加SKU" :visible.sync="addSkuDialogVisible" width="50%">
      <el-form :model="newSku" :rules="skuRules" ref="skuForm" label-width="100px">
        <el-form-item label="SKU编码" prop="sku">
          <el-input v-model="newSku.sku" placeholder="请输入SKU编码"></el-input>
        </el-form-item>
        <el-form-item label="SKU名称" prop="name">
          <el-input v-model="newSku.name" placeholder="请输入SKU名称"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="newSku.category" placeholder="请选择分类" style="width: 100%">
            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始库存" prop="stock">
          <el-input-number v-model="newSku.stock" :min="0" :max="10000"></el-input-number>
        </el-form-item>
        <el-form-item label="最低库存" prop="minStock">
          <el-input-number v-model="newSku.minStock" :min="0" :max="1000"></el-input-number>
          <span class="form-tip">低于此数量将触发库存预警</span>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="newSku.image" :src="newSku.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="newSku.remark" :rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addSkuDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitSkuForm">确定</el-button>
      </span>
    </el-dialog>
    
    <!-- 入库对话框 -->
    <el-dialog title="SKU入库" :visible.sync="inboundDialogVisible" width="40%">
      <div class="dialog-content">
        <div class="sku-info">
          <el-image :src="currentSku.image" style="width: 60px; height: 60px"></el-image>
          <div class="sku-details">
            <h3>{{ currentSku.name }}</h3>
            <p>SKU编码: {{ currentSku.sku }} | 当前库存: {{ currentSku.stock }}</p>
          </div>
        </div>
        
        <el-form :model="inboundForm" :rules="inboundRules" ref="inboundForm" label-width="100px" class="inbound-form">
          <el-form-item label="入库数量" prop="quantity">
            <el-input-number v-model="inboundForm.quantity" :min="1" :max="10000"></el-input-number>
          </el-form-item>
          <el-form-item label="入库类型" prop="type">
            <el-select v-model="inboundForm.type" placeholder="请选择入库类型" style="width: 100%">
              <el-option label="采购入库" value="purchase"></el-option>
              <el-option label="退货入库" value="return"></el-option>
              <el-option label="调拨入库" value="transfer"></el-option>
              <el-option label="其他入库" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入库日期" prop="date">
            <el-date-picker
              v-model="inboundForm.date"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作人" prop="operator">
            <el-input v-model="inboundForm.operator" placeholder="请输入操作人"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="inboundForm.remark" :rows="3" placeholder="请输入备注信息"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="inboundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitInbound">确定</el-button>
      </span>
    </el-dialog>
    
    <!-- 出库对话框 -->
    <el-dialog title="SKU出库" :visible.sync="outboundDialogVisible" width="40%">
      <div class="dialog-content">
        <div class="sku-info">
          <el-image :src="currentSku.image" style="width: 60px; height: 60px"></el-image>
          <div class="sku-details">
            <h3>{{ currentSku.name }}</h3>
            <p>SKU编码: {{ currentSku.sku }} | 当前库存: {{ currentSku.stock }}</p>
          </div>
        </div>
        
        <el-form :model="outboundForm" :rules="outboundRules" ref="outboundForm" label-width="100px" class="outbound-form">
          <el-form-item label="出库数量" prop="quantity">
            <el-input-number v-model="outboundForm.quantity" :min="1" :max="currentSku.stock"></el-input-number>
          </el-form-item>
          <el-form-item label="出库类型" prop="type">
            <el-select v-model="outboundForm.type" placeholder="请选择出库类型" style="width: 100%">
              <el-option label="销售出库" value="sale"></el-option>
              <el-option label="损耗出库" value="loss"></el-option>
              <el-option label="调拨出库" value="transfer"></el-option>
              <el-option label="其他出库" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库日期" prop="date">
            <el-date-picker
              v-model="outboundForm.date"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作人" prop="operator">
            <el-input v-model="outboundForm.operator" placeholder="请输入操作人"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="outboundForm.remark" :rows="3" placeholder="请输入备注信息"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outboundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitOutbound">确定</el-button>
      </span>
    </el-dialog>
    
    <!-- 查看关联商品对话框 -->
    <el-dialog title="关联商品详情" :visible.sync="linkedProductsDialogVisible" width="70%">
      <div class="dialog-content">
        <div class="sku-info">
          <el-image :src="currentSku.image" style="width: 60px; height: 60px"></el-image>
          <div class="sku-details">
            <h3>{{ currentSku.name }}</h3>
            <p>SKU编码: {{ currentSku.sku }} | 当前库存: {{ currentSku.stock }}</p>
          </div>
        </div>
        
        <el-divider content-position="left">关联商品列表</el-divider>
        
        <el-table :data="linkedProductsList" style="width: 100%" size="small">
          <el-table-column prop="image" label="图片" width="80">
            <template slot-scope="scope">
              <el-image 
                style="width: 50px; height: 50px" 
                :src="scope.row.image" 
                :preview-src-list="[scope.row.image]"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="asin" label="ASIN" width="120"></el-table-column>
          <el-table-column prop="sku" label="亚马逊SKU" width="120"></el-table-column>
          <el-table-column prop="quantity" label="需求数量" width="100"></el-table-column>
          <el-table-column prop="stockStatus" label="库存状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStockStatusType(scope.row.stockStatus)">
                {{ getStockStatusText(scope.row.stockStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="viewProductDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="linkedProductsDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 导入SKU对话框 -->
    <el-dialog title="批量导入SKU" :visible.sync="importDialogVisible" width="50%">
      <div class="dialog-content">
        <div class="import-tips">
          <p>1. 请先下载导入模板，按照模板格式填写SKU信息</p>
          <p>2. 支持Excel格式(.xlsx)文件，文件大小不超过10MB</p>
          <p>3. 导入时将自动校验SKU编码是否重复</p>
        </div>
        
        <div class="download-template">
          <el-button type="primary" size="small" @click="downloadTemplate">
            <i class="el-icon-download"></i> 下载导入模板
          </el-button>
        </div>
        
        <el-upload
          class="upload-demo"
          drag
          action="/api/upload/skus"
          :on-success="handleImportSuccess"
          :on-error="handleImportError"
          :before-upload="beforeImportUpload"
          :file-list="importFileList"
          :limit="1"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SkuInventoryView',
  data() {
    return {
      filterForm: {
        sku: '',
        name: '',
        category: '',
        stockStatus: ''
      },
      categories: [
        { value: 'electronics', label: '电子产品' },
        { value: 'clothing', label: '服装' },
        { value: 'home', label: '家居' },
        { value: 'kitchen', label: '厨房' },
        { value: 'tools', label: '工具' }
      ],
      skus: [],
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      selectedSkus: [],
      batchAction: '',
      addSkuDialogVisible: false,
      newSku: {
        sku: '',
        name: '',
        category: '',
        stock: 0,
        minStock: 0,
        image: '',
        remark: ''
      },
      skuForm: {
        sku: '',
        name: '',
        category: '',
        stock: 0,
        minStock: 0,
        image: ''
      },
      skuRules: {
        sku: [
          { required: true, message: '请输入SKU编码', trigger: 'blur' },
          { min: 3, max: 20, message: 'SKU编码长度在3到20个字符之间', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入SKU名称', trigger: 'blur' },
          { min: 2, max: 50, message: 'SKU名称长度在2到50个字符之间', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        minStock: [
          { required: true, message: '请输入最低库存', trigger: 'blur' },
          { type: 'number', min: 0, message: '最低库存必须大于等于0', trigger: 'blur' }
        ]
      },
      imageUrl: '',
      inboundDialogVisible: false,
      outboundDialogVisible: false,
      currentSku: {
        id: 0,
        sku: '',
        name: '',
        image: '',
        stock: 0
      },
      inboundForm: {
        quantity: 1,
        type: 'purchase',
        date: new Date(),
        operator: '',
        remark: ''
      },
      outboundForm: {
        quantity: 1,
        type: 'sale',
        date: new Date(),
        operator: '',
        remark: ''
      },
      inboundRules: {
        quantity: [
          { required: true, message: '请输入入库数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '入库数量必须大于0', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ]
      },
      outboundRules: {
        quantity: [
          { required: true, message: '请输入出库数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '出库数量必须大于0', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ]
      },
      linkedProductsDialogVisible: false,
      linkedProductsList: [],
      importDialogVisible: false,
      importFileList: []
    }
  },
  created() {
    this.fetchSkus();
  },
  methods: {
    fetchSkus() {
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        this.skus = [
          {
            id: 1,
            sku: 'COMP-CPU-I7',
            name: 'Intel Core i7 处理器',
            category: '电子产品',
            stock: 25,
            minStock: 10,
            stockStatus: 'sufficient',
            linkedProducts: 3,
            lastUpdate: '2023-05-15 10:30:45',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 2,
            sku: 'COMP-RAM-16G',
            name: '16GB DDR4 内存条',
            category: '电子产品',
            stock: 8,
            minStock: 10,
            stockStatus: 'warning',
            linkedProducts: 5,
            lastUpdate: '2023-05-14 15:20:30',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 3,
            sku: 'COMP-SSD-512',
            name: '512GB SSD固态硬盘',
            category: '电子产品',
            stock: 3,
            minStock: 8,
            stockStatus: 'critical',
            linkedProducts: 4,
            lastUpdate: '2023-05-13 09:15:22',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 4,
            sku: 'COMP-MB-Z590',
            name: 'Z590主板',
            category: '电子产品',
            stock: 0,
            minStock: 5,
            stockStatus: 'outOfStock',
            linkedProducts: 2,
            lastUpdate: '2023-05-12 14:45:10',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 5,
            sku: 'COMP-GPU-3060',
            name: 'NVIDIA RTX 3060显卡',
            category: '电子产品',
            stock: 12,
            minStock: 5,
            stockStatus: 'sufficient',
            linkedProducts: 3,
            lastUpdate: '2023-05-11 11:30:25',
            image: 'https://via.placeholder.com/100'
          }
        ];
        this.total = 5;
        this.loading = false;
      }, 500);
    },
    handleFilter() {
      this.currentPage = 1;
      this.fetchSkus();
    },
    resetFilter() {
      this.filterForm = {
        sku: '',
        name: '',
        category: '',
        stockStatus: ''
      };
      this.handleFilter();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchSkus();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchSkus();
    },
    handleSelectionChange(val) {
      this.selectedSkus = val;
    },
    handleBatchAction() {
      if (!this.batchAction) {
        this.$message.warning('请选择批量操作类型');
        return;
      }
      
      if (this.batchAction === 'inbound') {
        // 批量入库逻辑
        this.$message.success(`已对 ${this.selectedSkus.length} 个SKU执行批量入库操作`);
      } else if (this.batchAction === 'outbound') {
        // 批量出库逻辑
        this.$message.success(`已对 ${this.selectedSkus.length} 个SKU执行批量出库操作`);
      } else if (this.batchAction === 'export') {
        // 批量导出逻辑
        this.$message.success(`已导出 ${this.selectedSkus.length} 个SKU的数据`);
      }
    },
    showAddSkuDialog() {
      this.addSkuDialogVisible = true;
      // 重置表单
      this.newSku = {
        sku: '',
        name: '',
        category: '',
        stock: 0,
        minStock: 0,
        image: '',
        remark: ''
      };
      // 如果有表单引用，重置验证
      if (this.$refs.skuForm) {
        this.$refs.skuForm.resetFields();
      }
    },
    handleAvatarSuccess(res, file) {
      // 模拟上传成功后的处理
      this.newSku.image = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submitSkuForm() {
      this.$refs.skuForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            this.$message.success('SKU添加成功');
            this.addSkuDialogVisible = false;
            this.fetchSkus();
          }, 500);
        } else {
          return false;
        }
      });
    },
    viewDetail(row) {
      // 查看SKU详情
      this.$message.info(`查看SKU: ${row.name} 的详情`);
    },
    handleInbound(row) {
      this.currentSku = row;
      this.inboundForm = {
        quantity: 1,
        type: 'purchase',
        date: new Date(),
        operator: '',
        remark: ''
      };
      this.inboundDialogVisible = true;
    },
    submitInbound() {
      this.$refs.inboundForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            this.$message.success(`成功入库 ${this.inboundForm.quantity} 个 ${this.currentSku.name}`);
            this.inboundDialogVisible = false;
            // 更新当前SKU的库存
            const index = this.skus.findIndex(item => item.id === this.currentSku.id);
            if (index !== -1) {
              this.skus[index].stock += this.inboundForm.quantity;
              // 更新库存状态
              if (this.skus[index].stock > this.skus[index].minStock) {
                this.skus[index].stockStatus = 'sufficient';
              } else if (this.skus[index].stock === this.skus[index].minStock) {
                this.skus[index].stockStatus = 'warning';
              }
              this.skus[index].lastUpdate = new Date().toLocaleString();
            }
          }, 500);
        } else {
          return false;
        }
      });
    },
    handleOutbound(row) {
      this.currentSku = row;
      this.outboundForm = {
        quantity: 1,
        type: 'sale',
        date: new Date(),
        operator: '',
        remark: ''
      };
      this.outboundDialogVisible = true;
    },
    submitOutbound() {
      this.$refs.outboundForm.validate((valid) => {
        if (valid) {
          if (this.outboundForm.quantity > this.currentSku.stock) {
            this.$message.error('出库数量不能大于当前库存');
            return false;
          }
          
          // 模拟提交
          setTimeout(() => {
            this.$message.success(`成功出库 ${this.outboundForm.quantity} 个 ${this.currentSku.name}`);
            this.outboundDialogVisible = false;
            // 更新当前SKU的库存
            const index = this.skus.findIndex(item => item.id === this.currentSku.id);
            if (index !== -1) {
              this.skus[index].stock -= this.outboundForm.quantity;
              // 更新库存状态
              if (this.skus[index].stock === 0) {
                this.skus[index].stockStatus = 'outOfStock';
              } else if (this.skus[index].stock < this.skus[index].minStock) {
                this.skus[index].stockStatus = 'critical';
              } else if (this.skus[index].stock === this.skus[index].minStock) {
                this.skus[index].stockStatus = 'warning';
              }
              this.skus[index].lastUpdate = new Date().toLocaleString();
            }
          }, 500);
        } else {
          return false;
        }
      });
    },
    viewLinkedProducts(row) {
      this.currentSku = row;
      // 模拟获取关联商品
      setTimeout(() => {
        this.linkedProductsList = [
          {
            id: 1,
            name: '高性能游戏电脑主机',
            asin: 'B07X1KRPVS',
            sku: 'GAME-PC-001',
            quantity: 1,
            stockStatus: 'sufficient',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 2,
            name: '办公电脑主机',
            asin: 'B08CZVSGWK',
            sku: 'OFFICE-PC-001',
            quantity: 1,
            stockStatus: 'warning',
            image: 'https://via.placeholder.com/100'
          },
          {
            id: 3,
            name: '设计师工作站',
            asin: 'B09DPLK7HZ',
            sku: 'DESIGN-PC-001',
            quantity: 1,
            stockStatus: 'critical',
            image: 'https://via.placeholder.com/100'
          }
        ];
        this.linkedProductsDialogVisible = true;
      }, 500);
    },
    viewProductDetail(product) {
      // 跳转到商品详情页
      this.$router.push(`/amazon-products/detail/${product.id}`);
    },
    editSku(row) {
      this.skuForm = { ...row };
      this.imageUrl = row.image;
      this.addSkuDialogVisible = true;
    },
    deleteSku(row) {
      this.$confirm('确定要删除该SKU吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除
        setTimeout(() => {
          this.$message.success('SKU删除成功');
          this.fetchSkus();
        }, 500);
      }).catch(() => {
        // 取消删除
      });
    },
    importSkus() {
      this.importDialogVisible = true;
      this.importFileList = [];
    },
    downloadTemplate() {
      // 模拟下载模板
      this.$message.success('模板下载成功');
    },
    handleImportSuccess(response, file, fileList) {
      this.$message.success('SKU导入成功');
      this.importDialogVisible = false;
      this.fetchSkus();
    },
    handleImportError() {
      this.$message.error('SKU导入失败');
    },
    beforeImportUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      const isLt10M = file.size / 1024 / 1024 < 10;
      
      if (!isExcel) {
        this.$message.error('上传文件只能是 Excel 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isExcel && isLt10M;
    },
    exportSkus() {
      // 模拟导出
      this.$message.success('SKU数据导出成功');
    },
    getStockStatusType(status) {
      const types = {
        sufficient: 'success',
        warning: 'warning',
        critical: 'danger',
        outOfStock: 'info'
      };
      return types[status] || 'info';
    },
    getStockStatusText(status) {
      const texts = {
        sufficient: '充足',
        warning: '警告',
        critical: '紧急',
        outOfStock: '缺货'
      };
      return texts[status] || '未知';
    }
  }
}
</script>

<style scoped>
.sku-inventory {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-header h2 {
  margin: 0;
  font-size: 22px;
  color: var(--text-primary);
}
.header-actions {
  display: flex;
  gap: 10px;
}
.filter-card {
  margin-bottom: 20px;
}
.filter-form {
  display: flex;
  flex-wrap: wrap;
}
.table-card {
  margin-bottom: 20px;
}
.table-operations {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.total-count {
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 14px;
}
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.sku-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--background-color);
  border-radius: 4px;
}
.sku-details {
  margin-left: 15px;
}
.sku-details h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}
.sku-details p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.import-tips {
  margin-bottom: 15px;
}
.import-tips p {
  margin: 5px 0;
  color: #606266;
}
.download-template {
  margin-bottom: 15px;
}
</style> 